<template>
    <div id="operaBox" @mousedown="drag">
        <div class="operation" @click="switchChoose" @mouseenter.native="unfold">
        多选
    </div>
    <div class="operation" @mouseenter.native="unfold">
        添加到
    </div>
    <div class="operation" @mouseenter.native="unfold">
        通知
    </div>
    <div class="circle" @mouseenter.native="unfold" @mouseleave="fold">
        点击 <br>
        展开
    </div>
    </div>
</template>
<script setup>
import { defineEmits, ref } from 'vue';

const emits = defineEmits(['closeChoose', 'openChoose'])

//切换复选框状态
const chooseState = ref(false)
const switchChoose = ()=>{
    console.log(chooseState.value);
    if(chooseState.value){
        emits('closeChoose')
        chooseState.value = false
    }else{
        console.log(123);
        emits('openChoose')
        chooseState.value = true
    }
}

//鼠标经过展开
const unfold = function () {
    let operations = document.querySelectorAll('.operation');
    for (let i = 0; i < operations.length; i++) {
        operations[i].classList.add(`operation${i + 1}`);
    }
}
//鼠标离开折叠
const fold = function () {
    let operations = document.querySelectorAll('.operation');
    for (let i = 0; i < operations.length; i++) {
        operations[i].classList.remove(`operation${i + 1}`);
    }
}


// 拖拽盒子
const drag = function (event) {
    let obj = document.querySelector('#operaBox')

    //2.这行代码的作用？
    event = event || window.event;

    //div的偏移量 鼠标.clientX-元素.offsetLeft
    //div的偏移量 鼠标.clientY-元素.offsetTop
    var ol = event.clientX - obj.offsetLeft;
    var ot = event.clientY - obj.offsetTop;

    //1.当鼠标在被拖拽元素上按下时，开始拖拽
    document.onmousemove = function (event) {
        //设置box1捕获所有鼠标按下的事件
        //setCapture可以将鼠标事件锁定在指定的元素上，当元素捕获了鼠标事件后，该事件只能作用在当前元素上。
        obj.setCapture && obj.setCapture();
        //2.当鼠标移动时被拖拽元素跟随鼠标移动
        event = event || window.event;
        var left = event.clientX - ol;
        var top = event.clientY - ot;
        obj.style.left = left + "px";
        obj.style.top = top + "px";
    }
    //为元素绑定一个鼠标松开函数
    document.onmouseup = function () {
        // 3.当鼠标松开时，被拖拽元素固定在当前位置
        document.onmousemove = null;
        document.onmouseup = null;
        //当鼠标松开时取消捕获
        obj.releaseCapture && obj.releaseCapture();
    }
    //3.为什么要添加return false?
    return false;
}

</script>
<style scoped>
#operaBox{
    position: fixed;
}
.operation,
.circle {
    width: 60px;
    height: 60px;
    border-radius: 30px;
    background-color: #8493a6;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    font-family: Source Han Sans CN;
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 18px;
    letter-spacing: 0px;
    color: #fafafa;
    cursor: pointer;
    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
}

.circle {
    position: absolute;
}

.operation {
    background-color: #fff;
    /* border-radius: 0px; */
    position: absolute;
    color: #707070;
    transition: transform 0.6s;
}

.operation1 {
    transform: translate(0px, 60px);
}

.operation2 {
    transform: translate(0px, 120px);
}

.operation3 {
    transform: translate(0px, 180px);
}
</style>